<template>
  <div v-loading="loading">
    <div class="acea-row row-middle border_bottom pb-24" v-if="psInfo">
      <div class="avatar mr20"><img :src="psInfo.avatar"></div>
      <div class="dashboard-workplace-header-tip">
      <p class="dashboard-workplace-header-tip-title">{{psInfo.name | filterEmpty  }} | {{psInfo.sex | sexFilter}}</p>
      <div class="dashboard-workplace-header-tip-desc">
      <span class="dashboard-workplace-header-tip-desc-sp pb-1">手机号: {{ psInfo.phone_number | filterEmpty}}</span>
      <span class="dashboard-workplace-header-tip-desc-sp pb-1">身份证号: {{ psInfo.id_card | filterEmpty}}</span>
      </div>
        <div class="dashboard-workplace-header-tip-desc">
          <span :style="psInfo.autherized===1?'color:#91cc75':'color:red'">{{psInfo.autherized_text}}</span>
        </div>
      </div>
    </div>
    <el-row align="middle" :gutter="10" class="ivu-mt mt20">
      <el-col :span="4">
        <el-menu
          default-active="0"
          class="el-menu-vertical-demo"
          @select="changeType"
        >
          <el-menu-item :name="item.val" v-for="(item, index) in list" :key="index" :index="item.val">
            <span slot="title">{{item.label}}</span>
          </el-menu-item >
        </el-menu>
      </el-col>
      <el-col :span="20">
        <el-form ref="pram" label-width="100px" @submit.native.prevent>
          <template v-if="tableFrom.type === '0'">
            <el-row align="middle" :gutter="24" class="ivu-mt">
              <el-col :span="12">
                <el-form-item label="求职意向：">
                  <div class="item-line">{{userInfo.intention | filterEmpty}}</div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="空闲时间：">
                  <div class="item-line">{{userInfo.free_text | filterEmpty}}</div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row align="middle" :gutter="24" class="ivu-mt">
              <el-col :span="12">
                <el-form-item label="学历：">
                  <div class="item-line">{{userInfo.education_text | filterEmpty}}</div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="经验：">
                  <div class="item-line">{{userInfo.experience_text | filterEmpty}}</div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="技能标签：">
              <div class="item-line">
                <template v-if="userInfo.skill_label_text">
                  <el-tag size="small" type="info" v-for="(item, index) in userInfo.skill_label_text" :key="index" class="mr5">
                    {{ item }}
                  </el-tag>
                </template>
                <template v-else>-</template>
              </div>
            </el-form-item>
            <el-form-item label="个人简介：">
              <div class="item-line">{{userInfo.introduce | filterEmpty}}</div>
<!--              <el-input v-model="userInfo.introduce" type="textarea" :rows="7" placeholder="个人简介" readonly/>-->
            </el-form-item>
          </template>
          <template v-if="tableFrom.type === '1'">
            <el-row :gutter="24">
              <el-col :span="24">
                <el-form-item :label="'图片('+userInfo.skill_certificate.length +'/6)：'">
                  <div class="acea-row" v-if="userInfo.skill_certificate">
                    <!-- <div
                      v-for="(item,index) in psInfo.photo.sliderImages"
                      :key="index"
                      class="pictrue mb10"
                      draggable="true"
                      @dragstart="handleDragStart($event, item)"
                      @dragover.prevent="handleDragOver($event, item)"
                      @dragenter="handleDragEnter($event, item)"
                      @dragend="handleDragEnd($event, item)"
                    > -->
                    <div
                      v-for="(item,index) in userInfo.skill_certificate"
                      :key="index"
                      class="pictrue mb10"
                      draggable="true"
                    >
                      <el-image
                        class="photo-el-image"
                        :src="item"
                        :preview-src-list="userInfo.skill_certificate"
                      />
                      <!--                      <img :src="item">-->
                      <!--                      <i v-if="!isDisabled" class="el-icon-error btndel" @click="handleRemove(index)"/>-->
                    </div>
                    <!-- <div v-if="pram.sliderImages.length<6 && !isDisabled" class="upLoadPicBox" @click="modalPicTap('2')">
                      <div class="upLoad">
                        <i class="el-icon-camera cameraIconfont" />
                      </div>
                    </div> -->
                  </div>
                  <div v-else>-</div>
                </el-form-item>
              </el-col>
            </el-row>
          </template>
          <template v-if="tableFrom.type === '2'">
            <el-row align="middle" :gutter="24" class="ivu-mt">
              <el-col :span="12">
                <el-form-item label="企业名称：">
                  <div class="item-line">{{userAssociation.name | filterEmpty}}</div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="职位：">
                  <div class="item-line">{{userAssociation.position | filterEmpty}}</div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item :label="'营业执照：'">
              <div class="acea-row" v-if="userAssociation.business_license">
                <!-- <div
                  v-for="(item,index) in psInfo.photo.sliderImages"
                  :key="index"
                  class="pictrue mb10"
                  draggable="true"
                  @dragstart="handleDragStart($event, item)"
                  @dragover.prevent="handleDragOver($event, item)"
                  @dragenter="handleDragEnter($event, item)"
                  @dragend="handleDragEnd($event, item)"
                > -->
                <div
                  class="pictrue mb10"
                  draggable="true"
                >
                  <el-image
                    class="photo-el-image"
                    :src="userAssociation.business_license"
                    :preview-src-list="[userAssociation.business_license]"
                  />
                  <!--                      <img :src="item">-->
                  <!--                      <i v-if="!isDisabled" class="el-icon-error btndel" @click="handleRemove(index)"/>-->
                </div>
                <!-- <div v-if="pram.sliderImages.length<6 && !isDisabled" class="upLoadPicBox" @click="modalPicTap('2')">
                  <div class="upLoad">
                    <i class="el-icon-camera cameraIconfont" />
                  </div>
                </div> -->
              </div>
              <div v-else>-</div>
            </el-form-item>
          </template>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { userInfodetailApi, topdetailApi, userAssociationdetailApi } from '@/api/user'
  export default {
    name: "UserDetails",
    filters: {
      sexFilter(status) {
        const statusMap = {
          0: '未知',
          1: '男',
          2: '女',
        }
        return statusMap[status]
      }
    },
    props:{
      id: {
        type: Number,
        default: null
      }
    },
    data() {
      return {
        loading: false,
        columns: [],
        Visible: false,
        list: [
          { val: '0', label: '求职信息' },
          { val: '1', label: '技能证书' },
          { val: '2', label: '企业信息' },
        ],
        tableData: {
          data: [],
          total: 0
        },
        tableFrom: {
          page: 1,
          limit: 6,
          type : '0',
          userId : ''
        },
        psInfo: {},
        userInfo:{},
        userAssociation:{},
      }
    },
    mounted(){
      if(this.id){
        this.getHeader()
        this.changeType(this.tableFrom.type)
      }

    },
    methods: {
      close() {
        this.$emit('close')
      },

      changeType(key) {
        this.tableFrom.type = key
        if(key === '0'){
          this.getUserInfo()
        }else if(key === '2'){
          this.getUserAssociationInfo()
        }
      },
      getUserInfo() {
        this.loading = true
        //this.userInfo = {education_text:'1',experience_text:'1',intention_text:'1',free_text:'1',skill_label_arr:['1','2','3'],skill_certificate_arr:["https://api.java.crmeb.net/crmebimage/public/content/2022/08/08/6e6a4c88b97643ffa99cac643ca9252653ph2bx29l.jpeg","https://api.java.crmeb.net/crmebimage/public/content/2022/07/30/d4b7d1e21e1146c49622b213b65e97607rqdrfy1ai.jpeg","https://api.java.crmeb.net/crmebimage/public/content/2022/08/08/6e6a4c88b97643ffa99cac643ca9252653ph2bx29l.jpeg","https://api.java.crmeb.net/crmebimage/public/content/2022/07/30/d4b7d1e21e1146c49622b213b65e97607rqdrfy1ai.jpeg","https://api.java.crmeb.net/crmebimage/public/content/2022/08/08/6e6a4c88b97643ffa99cac643ca9252653ph2bx29l.jpeg"]}
        userInfodetailApi({id : this.id}).then(res => {
          //后期接口调用
          this.userInfo = res
          this.loading = false
        }).catch(res => {
          this.loading = false
        })
      },
      getUserAssociationInfo() {
        this.loading = true
        //this.userAssociation = {name:'1',position:'1',business_license:"https://api.java.crmeb.net/crmebimage/public/content/2022/08/08/6e6a4c88b97643ffa99cac643ca9252653ph2bx29l.jpeg"}
        userAssociationdetailApi({id : this.id}).then(res => {
          //后期接口调用
          this.userAssociation = res
          this.loading = false
        }).catch(res => {
          this.loading = false
        })
      },
      pageChange(page) {
        this.tableFrom.page = page
        if(this.tableFrom.type === '0'){
          this.getUserInfo()
        }else if(key === '2'){
          this.getUserAssociationInfo()
        }
      },
      handleSizeChange(val) {
        this.tableFrom.limit = val
        if(this.tableFrom.type === '0'){
          this.getUserInfo()
        }else if(key === '2'){
          this.getUserAssociationInfo()
        }
      },
      getHeader() {
        topdetailApi({id : this.id}).then(res => {
        //后期接口调用
          this.psInfo = res
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .avatar{
    width: 70px;
    height: 70px;
    border-radius: 50%;
    overflow: hidden;
    margin-left: 18px;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .dashboard-workplace {
    &-header {
      &-avatar {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        margin-right: 16px;
        font-weight: 600;
      }

      &-tip {
        width: 82%;
        display: inline-block;
        vertical-align: middle;
        margin-top: -12px;
        &-title {
          font-size: 13px;
          font-weight: 600;
          color: rgba(0, 0, 0, 0.85);
          line-height: 18px;
          padding: 10px 0 10px;
        }

        &-desc {
          &-sp {
            width: 32%;
            color: #17233D;
            font-size: 13px;
            display: inline-block;
          }
        }
      }

      &-extra {
        .ivu-col {
          p {
            text-align: right;
          }

          p:first-child {
            span:first-child {
              margin-right: 4px;
            }

            span:last-child {
              color: #808695;
            }
          }

          p:last-child {
            font-size: 22px;
          }
        }
      }
    }
  }
  .pb-1{
    padding-bottom: 10px;
  }
  .mr20{
    margin: 0 20px;
  }
  .border_bottom{
    border-bottom: 1px solid #E7EAEC;
  }
  .pb-24{
    padding-bottom: 24px;
  }
  .pictrue{
    width: 250px;
    height: 180px;
    border: 1px dotted rgba(0,0,0,0.1);
    margin-right: 10px;
    position: relative;
    cursor: pointer;
    .photo-el-image{
      width: 100%;
      height: 100%;
    }
    img{
      width: 100%;
      height: 100%;
    }
    video{
      width: 100%;
      height: 100%;
    }
  }
</style>
